<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bases.css" >
    <style>

        .animation{
            width: 15rem;
            height: 40rem;
            position: relative;
            background: rgb(160 133 214);
        }
        .bx{
            width: 8rem;
            height: 6rem;
            position: relative;
            margin: 0 auto;
            top: 1rem;
            background: rgb(160 133 214);
            z-index: 9;
            -webkit-animation: anms  1s ease-in-out 1s infinite alternate;
        }
        @-webkit-keyframes anms{
            0%{left: 0rem; top: 1rem;}
            100%{left: 0rem; top: 1.6rem;}
        }
        .bx img:last-child{
           position: absolute;
           right: -.1rem;
           top: .7rem;
           -webkit-transform-origin: 55.5%;
           -webkit-animation: animation  .1s ease-in-out 1s infinite alternate;
           -webkit-animation-fill-mode: forwards;
           /* 定位执行一次不会回到原点而是第一次固定的点  infinite重复执行 */
        }
        @-webkit-keyframes animation{
            0%{-webkit-transform:rotate(0deg);}
            100%{-webkit-transform:rotate(320deg);}
        }
        .box{
            width: 15rem;
            height: 5rem;
            text-align: center;
            font-size: 2rem;
            color: #fff;
        }
        .box1{
        width: 13rem;
        height: 5rem;
        margin: 0 auto;
        border: 1px solid #fff;
        line-height: 5rem;
        position: relative;
        -webkit-animation: name1  1s ease-in-out 1s ;
        -webkit-animation-fill-mode: forwards;
    }
    @-webkit-keyframes name1{
        0%{-webkit-transform:scale(.1);}
        100%{-webkit-transform:scale(1);}
    }
    .box2{
        width: 6rem;
        height: 3rem;
        margin: 0 auto;
        position: absolute;
        top: 10rem;
        left: 4rem;
        background: rgb(160 133 214);
        font-size: 1rem !important;
        -webkit-animation: name2  1s ease-in-out 1s ;
        -webkit-animation-fill-mode: forwards;
    }
    @-webkit-keyframes name2{
        0%{-webkit-transform:scale(.1);}
        50%{-webkit-transform:scale(1.2);}
        100%{-webkit-transform:scale(1);}
    }
</style>
</head>
<body>
<div class="animation">
    <div class="bx">
        <img src="./animation/plane.png">
        <img src="./animation/propeller.png">
    </div>
    <div class="box">
        <div class="box1">苏宁易购</div>
        <div class="box2">Hello </div>
    </div>

</div>
</body>
</html>